<template>
  <div class="second-count-down-wrapper">
    <span class="hour">{{actStartHour}}点场</span>
    <span class="count-down">{{countDownText}}</span>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'SecondCount',
  props: {
    // 格式：'2018-11-19 18:50:00'
    actStartTime: String,
    // 活动有效期
    // 单位：s
    duration: Number
  },
  data () {
    return {
      // 倒计时文本
      countDownText: '00天00时00分00秒'
    }
  },
  computed: {
    // 活动开始小时
    actStartHour: function () {
      return new Date(this.actStartTime).getHours() + 1
    }
  },
  created () {
    this.countDown()
  },
  methods: {
    timeFormat (param) {
      return param < 10 ? '0' + param : param
    },
    countDown () {
      var interval = setInterval(() => {
        // 获取当前时间，单位:s
        const newTime = new Date().getTime() / 1000
        // 计算活动开始时间，单位:s
        const actStartTime = new Date(this.actStartTime).getTime() / 1000
        // 活动持续时间，单位:s
        const duration = this.duration
        // 记录倒计时的对象
        let obj = null
        // 若活动已结束
        if (actStartTime + duration < newTime) {
          this.countDownText = '活动已结束'
          clearInterval(interval)
          return
        }

        // 活动开始前倒计时
        if (actStartTime > newTime) {
          const time = (actStartTime - newTime) // 获取天、时、分、秒
          const day = parseInt(time / (60 * 60 * 24))
          const hou = parseInt((time % (60 * 60 * 24)) / 3600)
          const min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
          const sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          }
          this.countDownText = '离活动开始还有:' + obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
        } else { // 活动进行中倒计时
          const time = actStartTime + duration - newTime // 获取天、时、分、秒
          const day = parseInt(time / (60 * 60 * 24))
          const hou = parseInt((time % (60 * 60 * 24)) / 3600)
          const min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
          const sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
          obj = {
            day: this.timeFormat(day),
            hou: this.timeFormat(hou),
            min: this.timeFormat(min),
            sec: this.timeFormat(sec)
          }
          this.countDownText = '离活动结束还有:' + obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒'
        }
      }, 1000)
    }
  }
}
</script>

<style lang="stylus" scoped>
.second-count-down-wrapper {
  font-size: px2rem(30);

  .hour {
    background: $color-red;
    color: $color-white;
    border-top-left-radius: px2rem(10);
    border-bottom-left-radius: px2rem(10);
    padding-left: px2rem(15);
    padding-right: px2rem(15);
    padding-top: px2rem(5);
    padding-bottom: px2rem(5);
  }

  .count-down {
    background: $color-white;
    color: $color-red;
    border: solid px2rem(1) $color-red;
    border-top-right-radius: px2rem(10);
    border-bottom-right-radius: px2rem(10);
    padding-left: px2rem(15);
    padding-right: px2rem(15);
    padding-top: px2rem(5);
    padding-bottom: px2rem(5);
  }
}
</style>
